<template lang="pug">
	.news-wrap
		scroll-view.scroll-check(:scroll-x="true")
			.check-none(v-if="!checkList.length")
			.check-item-wrap(v-if="checkList.length")
				.check-item(:class="{'check-active':index === currentTab}" v-for="(item,index) in checkList" :key="item" @click="checkTab(index)")
					div {{item.column_name}}
		swiper.swiper-view(:current="currentTab" duration="300" @change="swiperTab" 	:style="{height:swiperHeight+'rpx'}")
			swiper-item
				scroll-view.swiper-scroll-item(:scroll-y="true")
					.swiper-ad-wrap
						.bule-line
						swiper.swiper-ad(duration="300")
							swiper-item 1
							swiper-item 1
							swiper-item 1
			swiper-item
				scroll-view.swiper-scroll-item(:scroll-y="true")
					div(v-for="n in 100" :key="n" ) 2
</template>
<script>
export default {
	data() {
		return {
			checkList: [],
			currentTab: 0,
			swiperHeight: 0
		}
	},
	computed: {},
	mounted() {
		this.getCheckList()
		this.getSwiperHeight()
		this.getAdInfo()
	},
	onPullDownRefresh() {},
	onReachBottom() {},
	methods: {
		getCheckList() {
			this.api.jtApi
				.getCheckList({})
				.then(data => {
					if (data.ret_code === '0') {
						this.checkList = data.columns.column
						this.checkList.unshift({
							column_name: '推荐'
						})
					} else {
					}
				})
				.catch(() => {})
		},
		checkTab(index) {
			this.currentTab = index
		},
		swiperTab(e) {
			this.currentTab = e.target.current
		},
		getSwiperHeight() {
			var that = this
			this.wx.getSystemInfo({
				success: function(res) {
					var clientHeight = res.windowHeight,
						clientWidth = res.windowWidth,
						rpxR = 750 / clientWidth
					var calc = clientHeight * rpxR - 92
					that.swiperHeight = calc
				}
			})
		},
		getAdInfo() {
			this.api.jtApi
				.getNewsInfo({
					is_plate_top: 1,
					page_size: 3
				})
				.then(data => {
					if (data.ret_code === '0') {
						console.log(data)
					} else {
					}
				})
				.catch(() => {})
		}
	},
	components: {}
}
</script>

<style lang="stylus">
	.news-wrap
		.scroll-check
			width 100%
			background-color themeColor
			white-space nowrap
			.check-item-wrap
				padding-bottom 4px
				.check-item
					height 100%
					display inline-block
					line-height 80px
					font-size 30px
					font-weight 400
					color white
					padding 0 30px
					text-align center
				.check-active
					border-bottom 4px solid white
			.check-none
				width 100%
				height 80px
		.swiper-view
			width 100%
			.swiper-scroll-item
				height 100%
				.swiper-ad-wrap
					position relative
					height 260px
					background-color white
					.bule-line
						height 80px
						background-color themeColor
					.swiper-ad
						position absolute
						left 30px
						right 30px
						top 10px
						height 220px
						background-color yellow
						z-index 3
						border-radius 10px
						shadowBox()
</style>
